<template>
  <div class="guild">
    <!-- 英雄区域 -->
    <section class="hero">
      <a-row justify="center">
        <a-col :xs="24" :lg="20">
          <h1>星辰学术公会</h1>
          <p>致力于学术研究和知识传播，聚集校园最优秀的研究者和学习者</p>
        </a-col>
      </a-row>
    </section>

    <!-- 公会头部信息 -->
    <a-card class="guild-header" :bordered="true">
      <a-row :gutter="30" align="middle">
        <a-col :xs="24" :md="6">
          <div class="guild-logo">
            <i class="fas fa-star"></i>
          </div>
        </a-col>
        <a-col :xs="24" :md="18">
          <div class="guild-info">
            <h1 class="guild-title">星辰学术公会</h1>
            <a-tag class="guild-level">Lv.8 精英公会</a-tag>
            <p class="guild-desc">
              成立于2018年，星辰学术公会聚集了全校最优秀的学术研究者和学习者。我们致力于推动学术交流、知识传播和科研创新，定期举办学术沙龙、研究项目和知识分享活动。
            </p>

            <a-row :gutter="20" class="guild-stats">
              <a-col :xs="12" :sm="6" v-for="stat in guildStats" :key="stat.label">
                <div class="guild-stat">
                  <div class="guild-stat-value">{{ stat.value }}</div>
                  <div class="guild-stat-label">{{ stat.label }}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 公会标签页 -->
    <a-tabs v-model:activeKey="activeTab" class="guild-tabs">
      <a-tab-pane key="members" tab="公会成员">
        <div class="guild-content">
          <div class="section-header" style="text-align: left; margin-bottom: 30px;">
            <h2>核心成员</h2>
            <p>公会领导团队和核心贡献者</p>
          </div>

          <a-row :gutter="20">
            <a-col :xs="24" :sm="12" :md="8" v-for="member in coreMembers" :key="member.id">
              <a-card class="member-card" :bordered="true">
                <div class="member-header">
                  <div class="member-avatar">
                    <i class="fas fa-user"></i>
                  </div>
                  <div>
                    <div class="member-name">{{ member.name }}</div>
                    <div class="member-role">{{ member.role }}</div>
                  </div>
                </div>
                <p class="member-desc">{{ member.description }}</p>
                <a-row :gutter="16" class="member-stats">
                  <a-col :span="12">
                    <div class="member-stat">
                      <div class="member-stat-value">{{ member.contribution }}</div>
                      <div class="member-stat-label">贡献值</div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="member-stat">
                      <div class="member-stat-value">{{ member.tasks }}</div>
                      <div class="member-stat-label">任务数</div>
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>

      <a-tab-pane key="tasks" tab="进行中任务">
        <div class="guild-content">
          <a-empty description="暂无进行中的任务" />
        </div>
      </a-tab-pane>

      <a-tab-pane key="achievements" tab="公会成就">
        <div class="guild-content">
          <a-empty description="暂无公会成就" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Guild',
  setup() {
    const activeTab = ref('members')

    const guildStats = ref([
      { value: '128', label: '公会成员' },
      { value: '42', label: '进行中任务' },
      { value: '356', label: '已完成任务' },
      { value: '12.8K', label: '公会积分' }
    ])

    const coreMembers = ref([
      {
        id: 1,
        name: '张教授',
        role: '公会会长',
        description: '历史学教授，学术研究带头人，具有丰富的项目管理经验。',
        contribution: 128,
        tasks: 42
      },
      {
        id: 2,
        name: '李博士',
        role: '研究主任',
        description: '计算机科学博士，负责技术研究项目和学术论文指导。',
        contribution: 98,
        tasks: 36
      },
      {
        id: 3,
        name: '王同学',
        role: '学生代表',
        description: '物理系研究生，负责协调学生研究项目和活动组织。',
        contribution: 76,
        tasks: 28
      }
    ])

    return {
      activeTab,
      guildStats,
      coreMembers
    }
  }
})
</script>

<style scoped>
.guild {
  padding-bottom: 50px;
}

.hero {
  padding: 80px 0 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 25px;
  background: linear-gradient(to right, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 40px;
  color: #a1a8b8;
  line-height: 1.6;
}

.guild-header {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 40px;
}

.guild-header :deep(.ant-card-body) {
  padding: 0;
}

.guild-logo {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  background: linear-gradient(45deg, #2c3e50, #4a6491);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.guild-logo i {
  font-size: 60px;
  color: rgba(255, 255, 255, 0.1);
}

.guild-info {
  text-align: left;
}

.guild-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 10px;
}

.guild-level {
  background: linear-gradient(135deg, #d4af37 0%, #b8972e 100%);
  color: #1a2a4d;
  border: none;
  font-weight: 600;
  margin-bottom: 15px;
}

.guild-desc {
  color: #a1a8b8;
  line-height: 1.7;
  margin-bottom: 20px;
}

.guild-stats {
  margin-top: 30px;
}

.guild-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
}

.guild-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #d4af37;
  margin-bottom: 5px;
}

.guild-stat-label {
  font-size: 14px;
  color: #a1a8b8;
}

.guild-tabs {
  margin-bottom: 30px;
}

.guild-tabs :deep(.ant-tabs-nav) {
  margin-bottom: 30px;
}

.guild-tabs :deep(.ant-tabs-tab) {
  background: transparent;
  border: none;
  color: #f0f4f8;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.guild-tabs :deep(.ant-tabs-tab-active) {
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
}

.guild-tabs :deep(.ant-tabs-ink-bar) {
  background: #d4af37;
}

.guild-content {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-header h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 2.2rem;
  margin-bottom: 15px;
  background: linear-gradient(to right, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  color: #a1a8b8;
  line-height: 1.6;
}

.member-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
  height: 100%;
}

.member-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.3);
}

.member-card :deep(.ant-card-body) {
  padding: 0;
}

.member-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.member-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2c3e50, #4a6491);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-name {
  font-weight: 600;
  color: white;
  font-size: 1.1rem;
}

.member-role {
  color: #d4af37;
  font-size: 14px;
}

.member-desc {
  color: #a1a8b8;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.member-stats {
  margin-top: 10px;
}

.member-stat {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.member-stat-value {
  font-weight: 700;
  color: white;
  font-size: 1.2rem;
}

.member-stat-label {
  font-size: 12px;
  color: #a1a8b8;
}

@media (max-width: 768px) {
  .guild-info {
    text-align: center;
  }

  .guild-stats {
    justify-content: center;
  }
}
</style>